﻿<html>
	<head>
		<title>MenuBar - jQuery LigerUI API</title>      
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
		<link href="../common.css" rel="stylesheet" type="text/css" />
		<script src="../core.js" type="text/javascript"></script> 
	</head>
	<body>
		<h2>ligerMenuBar</h2> 
         
        
                    <p> 
            菜单条组件
        </p>
                     
          
                <h3>示例</h3>
        <pre><div><!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><span style="color: #008080;"> 1</span> <span style="color: #000000;"> </span><span style="color: #0000FF;">var</span><span style="color: #000000;"> menu1 </span><span style="color: #000000;">=</span><span style="color: #000000;"> { width: </span><span style="color: #000000;">120</span><span style="color: #000000;">, items:
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">            [
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">            { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">保存</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick },
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">            { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">列存为</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick },
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">            { line: </span><span style="color: #0000FF;">true</span><span style="color: #000000;"> },
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">            { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">关闭</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick }
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">            ]
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">        };
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">
</span><span style="color: #008080;">10</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">var</span><span style="color: #000000;"> menu2 </span><span style="color: #000000;">=</span><span style="color: #000000;"> { width: </span><span style="color: #000000;">120</span><span style="color: #000000;">, items:
</span><span style="color: #008080;">11</span> <span style="color: #000000;">            [
</span><span style="color: #008080;">12</span> <span style="color: #000000;">            {
</span><span style="color: #008080;">13</span> <span style="color: #000000;">                text: </span><span style="color: #000000;">'</span><span style="color: #000000;">文件</span><span style="color: #000000;">'</span><span style="color: #000000;">, children:
</span><span style="color: #008080;">14</span> <span style="color: #000000;">                [
</span><span style="color: #008080;">15</span> <span style="color: #000000;">                    { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">Excel</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick },
</span><span style="color: #008080;">16</span> <span style="color: #000000;">                    { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">Word</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick },
</span><span style="color: #008080;">17</span> <span style="color: #000000;">                    { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">PDF</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick },
</span><span style="color: #008080;">18</span> <span style="color: #000000;">                    { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">TXT</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick },
</span><span style="color: #008080;">19</span> <span style="color: #000000;">                    { line: </span><span style="color: #0000FF;">true</span><span style="color: #000000;"> },
</span><span style="color: #008080;">20</span> <span style="color: #000000;">                    { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">XML</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick }
</span><span style="color: #008080;">21</span> <span style="color: #000000;">                ]
</span><span style="color: #008080;">22</span> <span style="color: #000000;">            },
</span><span style="color: #008080;">23</span> <span style="color: #000000;">            ]
</span><span style="color: #008080;">24</span> <span style="color: #000000;">        };
</span><span style="color: #008080;">25</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">function</span><span style="color: #000000;"> itemclick(item)
</span><span style="color: #008080;">26</span> <span style="color: #000000;">        {
</span><span style="color: #008080;">27</span> <span style="color: #000000;">            alert(item.text);
</span><span style="color: #008080;">28</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">29</span> <span style="color: #000000;">        $(</span><span style="color: #0000FF;">function</span><span style="color: #000000;"> ()
</span><span style="color: #008080;">30</span> <span style="color: #000000;">        {
</span><span style="color: #008080;">31</span> <span style="color: #000000;">            $(</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">#topmenu</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">).ligerMenuBar({ items: [
</span><span style="color: #008080;">32</span> <span style="color: #000000;">                { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">文件</span><span style="color: #000000;">'</span><span style="color: #000000;">, menu: menu1 },
</span><span style="color: #008080;">33</span> <span style="color: #000000;">                { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">导出</span><span style="color: #000000;">'</span><span style="color: #000000;">, menu: menu2 }
</span><span style="color: #008080;">34</span> <span style="color: #000000;">            ]
</span><span style="color: #008080;">35</span> <span style="color: #000000;">            });
</span><span style="color: #008080;">36</span> <span style="color: #000000;">
</span><span style="color: #008080;">37</span> <span style="color: #000000;">            $(</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">#toptoolbar</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">).ligerToolBar({ items: [
</span><span style="color: #008080;">38</span> <span style="color: #000000;">                { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">增加</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick , icon:</span><span style="color: #000000;">'</span><span style="color: #000000;">add</span><span style="color: #000000;">'</span><span style="color: #000000;">},
</span><span style="color: #008080;">39</span> <span style="color: #000000;">                { line:</span><span style="color: #0000FF;">true</span><span style="color: #000000;"> },
</span><span style="color: #008080;">40</span> <span style="color: #000000;">                { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">修改</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick },
</span><span style="color: #008080;">41</span> <span style="color: #000000;">                { line:</span><span style="color: #0000FF;">true</span><span style="color: #000000;"> },
</span><span style="color: #008080;">42</span> <span style="color: #000000;">                { text: </span><span style="color: #000000;">'</span><span style="color: #000000;">删除</span><span style="color: #000000;">'</span><span style="color: #000000;">, click: itemclick }
</span><span style="color: #008080;">43</span> <span style="color: #000000;">            ]
</span><span style="color: #008080;">44</span> <span style="color: #000000;">            });
</span><span style="color: #008080;">45</span> <span style="color: #000000;">        });</span></div></pre>
        
        <h3>截图</h3>

        <p>
            <img src="../../uishow/ligerMenuBar.jpg" />
        </p>  
        

			</body>
</html>